<template>
	<view class="w-page">
		<uni-list class="li-it">
			<uni-list-item class="li-items li-im">
				<view class="li-txt">头像</view>
				<view class="li-txt li-last">
					<image :src="src" class="li-img li-txt"></image>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</view>
			</uni-list-item>
			<uni-list-item class="li-items ">
				<navigator url="./address" hover-class="other-navigator-hover" class="li-ite li-bor">
				    <view class="li-txt">收货地址</view>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</navigator>
			</uni-list-item>
			<uni-list-item class="li-items li-nav">
				<navigator url="./accountSecurity" hover-class="other-navigator-hover" class="li-ite">
				    <view class="li-txt">账号与安全</view>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</navigator>
			</uni-list-item>
			<uni-list-item class="li-items li-bor">
				<text class="li-txt">昵称</text>
				<view class="li-txt li-last">
					<input type="text" v-model="value" class="li-lastinput1"/>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</view>
			</uni-list-item>
			<uni-list-item class="li-items li-bor">
				<text class="li-txt">个性说明</text>
				<view class="li-txt li-last">
					<input type="text" v-model="values" class="li-lastinput2"/>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</view>
			</uni-list-item>
			<uni-list-item class="li-items li-bor">
				<text class="li-txt">性别</text>
				<view class="li-txt li-last">
					<picker @change="bindPickerChange" :value="index" :range="array" class="li-txt">
						<text>{{ array[index] }}</text>
					</picker>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</view>
			</uni-list-item>
			<uni-list-item class="li-items li-bor">
				<text class="li-txt">生日</text>

				<view class="li-txt li-last">
					<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="li-txt">
						<text>{{ date }}</text>
					</picker>
					<image src="../../static/list-arrow.png" class="li-imgs li-txt"></image>
				</view>
			</uni-list-item>
		</uni-list>
		<button form-type="submit" class="accbuts" @click="postpeople">提交修改</button>
	</view>
</template>

<script>
import url from '../../components/hosturl.js'
export default {
	data() {
		const currentDate = this.getDate({
			format: true
		});
		return {
			title: '个人信息',
			date: currentDate,
			array: ['*', '男', '女'],
			index: 0,
			src:'',
			value:'',
			values:''
		};
	},
	onLoad() {
		uni.setNavigationBarTitle({
			title: '个人中心'
		});
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#a286eb'
		});
		let _this = this;
		uni.request({
			url: url+'/Me/PersonalData',
			data:{
				token: uni.getStorageSync('token')
			},
			method:"GET",
			success: (res) => {
				console.log(res.data)
				_this.src=res.data.message.avatar_url;
				_this.value=res.data.message.nickname;
				_this.index=res.data.message.sex;
				_this.date=res.data.message.spring_birthday;
				_this.values=res.data.message.spring_description;
			}
		})
		
	},
	computed: {
		startDate() {
			return this.getDate('start');
		},
		endDate() {
			return this.getDate('end');
		}
	},
	methods: {
		bindDateChange: function(e) {
			this.date = e.target.value;
		},
		getDate(type) {
			const date = new Date();
			let year = date.getFullYear();
			let month = date.getMonth() + 1;
			let day = date.getDate();

			if (type === 'start') {
				year = year - 60;
			} else if (type === 'end') {
				year = year + 2;
			}
			month = month > 9 ? month : '0' + month;
			day = day > 9 ? day : '0' + day;
			return `${year}-${month}-${day}`;
		},
		bindPickerChange: function(e) {
			console.log('picker发送选择改变，携带值为', e.target.value);
			this.index = e.target.value;
		},
		postpeople(){
			let _this = this;
			console.log(_this.date,_this.values);
			uni.request({
				url: url+'/Me/Update',
				data:{
					token: uni.getStorageSync('token'),
					nickname: _this.value,
					sex:_this.index,
					spring_birthday:_this.date,
					spring_description:_this.values
				},
				method:"POST",
				header: {
				        "Content-Type": "application/x-www-form-urlencoded"
				},
				success: (res) => {
					console.log(res.data.msg)
					if(res.data.msg=='update successfully'){
						uni.showToast({
							title:'提交成功',
							duration: 2000
						})
					}
				}
			})
			
		}
	}
};
</script>

<style>
page {background-color: #F8F6FC;font-size: 32rpx;width: 100%;}
.w-page {width: 94%;}
.li-it {flex-wrap: wrap;}
.li-items {background-color: #ffffff;display: flex;height: 90rpx;justify-content: space-between;padding: 0 3%;width: 100%;}
.li-ite{background-color: #ffffff;display: flex;height: 90rpx;justify-content: space-between;width: 100%;}
.li-img {border-radius: 50%;height: 70rpx;width: 70rpx;}
.li-txt {margin: auto 0;}
.li-imgs {width: 12rpx;height: 24rpx;margin-left: 13rpx;}
.li-last {display: flex;}
.li-im{margin: 5% 0;}
.li-bor{border-bottom: 1rpx #EBEEF5 solid;}
.li-nav{margin-bottom: 5%;}
.li-but{margin: auto;background-color: transparent;border: none;color: #FFFFFF;}
.accbuts{background-color: #a286eb;margin-top: 25%;margin-left: 6%;color: #FFFFFF;}
.li-lastinput1{text-align: center;overflow: hidden;text-overflow: ellipsis;width: 110px;}
.li-lastinput2{text-align: center;overflow: hidden;text-overflow: ellipsis;width: 120px;}
</style>
